<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>生命周期</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message + '  --- 这是在outer HTML中的' }}</h1>
  </div>
</body>
<script>
  let vue = new Vue({
    el: '#app',
    // template: "<h1>{{ message + '  --- 这是在template中的' }}</h1>", //在vue配置项中修改的
    render: function(createElement) {
      return createElement('h1', 'render function')
    },
    data: {
      message: 'Vue的生命周期'
    },
    beforeCreate: function ()  {
      console.group('------beforeCreate创建前状态------');
      console.log('%c%s', 'color:red' , 'el     : ' + this.$el); //undefined
      console.log('%c%s', 'color:red','data   : ' + this.$data); //undefined
      console.log('%c%s', 'color:red','message: ' + this.message); //undefined
    },
    created: function ()  {
      console.group('------created创建完毕状态------');
      console.log('%c%s', 'color:red','el     : ' + this.$el); //undefined
      console.log('%c%s', 'color:red','data   : ' + this.$data); //已被初始化
      console.log('%c%s', 'color:red','message: ' + this.message); //已被初始化
    },
    beforeMount: function ()  {
      console.group('------beforeMount挂载前状态------');
      console.log('%c%s', 'color:red','el     : ' + this.$el); //已被初始化
      console.log(this.$el);
      console.log('%c%s', 'color:red','data   : ' + this.$data); //已被初始化
      console.log('%c%s', 'color:red','message: ' + this.message); //已被初始化
    },
    mounted: function () {
      console.group('------mounted 挂载结束状态------');
      console.log('%c%s', 'color:red','el     : ' + this.$el); //已被初始化
      console.log(this.$el);
      console.log('%c%s', 'color:red','data   : ' + this.$data); //已被初始化
      console.log('%c%s', 'color:red','message: ' + this.message); //已被初始化
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log('%c%s', 'color:red','el     : ' + this.$el);
      console.log(this.$el);
      console.log('%c%s', 'color:red','data   : ' + this.$data);
      console.log('%c%s', 'color:red','message: ' + this.message);
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log('%c%s', 'color:red','el     : ' + this.$el);
      console.log(this.$el);
      console.log('%c%s', 'color:red','data   : ' + this.$data);
      console.log('%c%s', 'color:red','message: ' + this.message);
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log('%c%s', 'color:red','el     : ' + this.$el);
      console.log(this.$el);
      console.log('%c%s', 'color:red','data   : ' + this.$data);
      console.log('%c%s', 'color:red','message: ' + this.message);
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log('%c%s', 'color:red','el     : ' + this.$el);
      console.log(this.$el);
      console.log('%c%s', 'color:red','data   : ' + this.$data);
      console.log('%c%s', 'color:red','message: ' + this.message)
    }
  })
</script>
</html>
